<template>
	<view class="cont">
		<view class="tab">
			<view class="item" :class="{'itema':tab_index==index}" v-for="(item,index) in lists" :key="index"
				@click="tpye(index,item.id)">
				{{item.name}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "Tab",
		data() {
			return {
				//tab选中的下标
				tab_index: 0,

			};
		},
		props: {
			lists: {
				type: Array,
				default: []
			},
			tab_color: {
				type: String,
				default: ''
			},
		},
		methods: {
			tpye(index, id) {
				var that = this;
				that.tab_index = index;
				that.$nextTick(() => {
					that.intoindex = "tab" + index
				});
				that.intoindex = ''
				that.$emit('switchover', id)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.cont {
		background-color: #fff;
	}

	.tab {
		width: 690rpx;
		margin-left: 30rpx;
		display: grid;
		justify-content: space-between;
		grid-template-columns: repeat(auto-fill, 120rpx);
		padding-bottom: 30rpx;
	}

	.item {
		margin-top: 20rpx;
		height: 60rpx;
		line-height: 60rpx;
		background-color: #fff;
		border: 1rpx solid #ccc;
		text-align: center;
	}

	.itema {
		color: #fff;
		background: linear-gradient(#00AEEC, #1296db);
	}
</style>
